<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>grid测试</title>
    <style>

        body{
            margin: 0;
        }


        .box {
            border: 10px solid #f99;
            height: 100vh;
            box-sizing: border-box;

            display: grid;
            grid-template-columns: 150px [c2] auto 150px 150px;
            grid-template-rows: 150px 150px 150px;

            grid-gap: 10px 20px;
            grid-template-areas: 'a b c x'
                                'd e f y'
                                'g h i z';
        }


        .item{
            /* width: 100px; */
            height: 100px;
            line-height: 100px;
            color: white;
            font-size: 50px;
            text-align: center;
        }

        .item6{
            grid-column-start: span 2;
        }

    </style>
</head>

<body>

    <div class="box">
        <div class="item" style="background-color: red;">1</div>
        <div class="item" style="background-color: orange;">2</div>
        <div class="item" style="background-color: yellow;">3</div>

        <div class="item" style="background-color: green;">4</div>
        <div class="item" style="background-color: paleturquoise;">5</div>
        <div class="item item6" style="background-color: blue;">6</div>

        <div class="item" style="background-color: blueviolet;">7</div>
        <div class="item" style="background-color: black;">8</div>
        <div class="item" style="background-color: gray;">9</div>
    </div>


</body>

</html>
